#統合

Chart.js は、プレーンな JavaScript またはさまざまなモジュール ローダーと統合できます。以下の例は、さまざまなシステムに Chart.js をロードする方法を示しています。

フロントエンド フレームワーク (React、Angular、Vue など) を使用している場合は、次を参照してください。利用可能な統合 (新しいウィンドウが開きます)。

#スクリプトタグ

<script src="path/to/chartjs/dist/chart.umd.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

#バンドラー (Webpack、Rollup など)

Chart.jsはツリーシェイク可能なため、使用するコントローラー、エレメント、スケール、プラグインをインポートして登録する必要があります。

#クイックスタート

バンドルのサイズを気にしない場合は、autoすべての機能が利用可能であることを確認するパッケージ:

import Chart from 'chart.js/auto';

#バンドルの最適化

バンドルを最適化するときは、アプリケーションに必要なコンポーネントをインポートして登録する必要があります。

オプションは、コントローラー、エレメント、プラグイン、スケールに分類されます。これらの多くを選択して選択できます。ツールチップを使用しない場合は、インポートおよび登録しないでください。Tooltipプラグイン。ただし、チャートの各タイプには、独自の最低限の要件があります (通常は、タイプのコントローラー、そのコントローラーで使用される要素、およびスケール)。

• 棒グラフ
  • BarController
  • BarElement
  • デフォルトのスケール:CategoryScale（バツ）、LinearScale(y)
• バブルチャート
  • BubbleController
  • PointElement
  • デフォルトのスケール:LinearScale(x/y)
• ドーナツチャート
  • DoughnutController
  • ArcElement
  • 体重計を使わないこと
• 折れ線グラフ
  • LineController
  • LineElement
  • PointElement
  • デフォルトのスケール:CategoryScale（バツ）、LinearScale(y)
• 円グラフ
  • PieController
  • ArcElement
  • 体重計を使わないこと
• 極面グラフ
  • PolarAreaController
  • ArcElement
  • デフォルトのスケール:RadialLinearScale(r)
• レーダーチャート
  • RadarController
  • LineElement
  • PointElement
  • デフォルトのスケール:RadialLinearScale(r)
• 散布図
  • ScatterController
  • PointElement
  • デフォルトのスケール:LinearScale(x/y)

利用可能なプラグイン:

• Decimation
• Filler- で記述された領域を埋めるために使用されますd9ca1fbb-4883-40d0-ベッド3-826114369b4f、 見る面グラフ
• Legend
• SubTitle
• Title
• Tooltip

利用可能なスケール:

• デカルト スケール (x/y)

  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale

• ラジアルスケール（r）

  • RadialLinearScale

#ヘルパー関数

ヘルパー関数を使用したい場合は、ヘルパー パッケージからこれらを個別にインポートし、スタンドアロン関数として使用する必要があります。

の例イベントをデータ値に変換するバンドラーを使用します。

import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    onClick: (e) => {
      const canvasPosition = getRelativePosition(e, chart);
      // Substitute the appropriate scale IDs
      const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
      const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
    }
  }
});

#CommonJS

Chart.js は ESM ライブラリであるため、CommonJS モジュールでは動的import:

const { Chart } = await import('chart.js');

#RequireJS

重要：RequireJS のみをロードできますAMDモジュール (新しいウィンドウが開きます)そのため、代わりにいずれかの UMD ビルドを必ず必要にしてください (つまり、dist/chart.umd.js）。

require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
    const myChart = new Chart(ctx, {...});
});

require(['chartjs'], function(Chart) {
    require(['moment'], function() {
        require(['chartjs-adapter-moment'], function() {
            new Chart(ctx, {...});
        });
    });
});